<template>
  <div v-if="show" class="update-notifier">
    <div class="notification">
      <div class="notification-header">
        <h3>发现新版本</h3>
        <button class="close-btn" @click="close">×</button>
      </div>
      <div class="notification-body">
        <p>检测到新版本可用，新版本包含以下改进：</p>
        <ul>
          <li v-for="(feature, index) in features" :key="index">
            {{ feature }}
          </li>
        </ul>
        <p v-if="autoRefresh" class="countdown">
          页面将在 {{ countdown }} 秒后自动刷新
        </p>
      </div>
      <div class="notification-actions">
        <button class="refresh-btn" @click="refresh">立即刷新</button>
        <button v-if="!autoRefresh" class="delay-btn" @click="delay">
          稍后提醒
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import UpdateNotifier from "../core/updateNotifier";

export default {
  name: "UpdateNotifier",
  props: {
    options: {
      type: Object,
      default: () => ({}),
    },
    features: {
      type: Array,
      default: () => ["性能优化", "问题修复"],
    },
  },
  data() {
    return {
      show: false,
      countdown: 0,
      autoRefresh: true,
    };
  },
  created() {
    this.notifier = new UpdateNotifier({
      ...this.options,
      autoRefresh: this.options.autoRefresh !== false,
    });

    this.autoRefresh = this.notifier.options.autoRefresh;

    // 监听更新事件
    this.notifier.on("update", this.handleUpdate);
    this.notifier.on("beforeRefresh", this.handleBeforeRefresh);
  },
  beforeDestroy() {
    this.notifier.destroy();
  },
  methods: {
    handleUpdate(version) {
      this.show = true;
    },
    handleBeforeRefresh(seconds) {
      this.countdown = seconds;
    },
    refresh() {
      this.notifier.refreshPage();
    },
    delay() {
      this.show = false;
      // 10分钟后重新检查
      setTimeout(() => {
        this.notifier.checkUpdate();
      }, 10 * 60 * 1000);
    },
    close() {
      this.show = false;
      if (this.notifier.countdownTimer) {
        clearInterval(this.notifier.countdownTimer);
        this.notifier.countdownTimer = null;
      }
    },
  },
};
</script>

<style scoped>
.update-notifier {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
}

.notification {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 90vw;
  overflow: hidden;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #1890ff;
  color: white;
}

.notification-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.notification-body {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.notification-body p {
  margin: 0 0 10px;
}

.notification-body ul {
  padding-left: 20px;
  margin: 10px 0;
}

.notification-body li {
  margin-bottom: 5px;
}

.countdown {
  font-weight: bold;
  color: #f5222d;
}

.notification-actions {
  display: flex;
  padding: 12px 16px;
  justify-content: flex-end;
  gap: 10px;
}

.notification-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.refresh-btn {
  background: #1890ff;
  color: white;
}

.delay-btn {
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.85);
}
</style>
